
@extends('public.base')
@section('body')
    <div class="layui-card layadmin-header">
        <div class="layui-breadcrumb" lay-filter="breadcrumb">
            <a lay-href="{{url('admin/console')}}">主页</a>
            <a><cite>组件</cite></a>
            <a><cite>数据表格</cite></a>
            <a><cite>数据表格的重载</cite></a>
        </div>
    </div>

    <div class="layui-fluid layui-form-pane" >
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-breadcrumb" lay-filter="breadcrumb">
                            <a lay-href="{{url('admin/console')}}">主页</a>
                            <a><cite>用户管理</cite></a>
                            <a><cite>用户中心</cite></a>
                        </div>
                    </div>

                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-btn-group form_quick_date">
                                    <a class="layui-btn layui-btn-primary" data-type="1"
                                       onclick="form_do_set_day(1,null,null)">今天</a>
                                    <a class="layui-btn layui-btn-primary" data-type="2"
                                       onclick="form_do_set_day(2,null,null)">昨天</a>
                                    <a class="layui-btn layui-btn-primary" data-type="3"
                                       onclick="form_do_set_day(3,null,null)">本周</a>
                                    <a class="layui-btn layui-btn-primary" data-type="4"
                                       onclick="form_do_set_day(4,null,null)">上周</a>
                                    <a class="layui-btn layui-btn-primary" data-type="5"
                                       onclick="form_do_set_day(5,null,null)">本月</a>
                                    <a class="layui-btn layui-btn-primary" data-type="6"
                                       onclick="form_do_set_day(6,null,null)">上月</a>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label layui-hide-md">开始日期</label>
                                <div class="layui-input-inline" style="width:100px;">
                                    <input type="text" class="layui-input" id="search_start_date" name="start_date"
                                           autocomplete="off"
                                           format="date" placeholder="开始日期">
                                </div>
                                <div class="layui-form-mid">
                                    -
                                </div>
                                <div class="layui-input-inline" style="width:100px;">
                                    <input type="text" class="layui-input" id="search_end_date" name="end_date"
                                           autocomplete="off"
                                           format="date" placeholder="结束日期">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">微信号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="wx_no" placeholder="请输入微信号" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">联系人</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="receiver" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">联系电话</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="receiver_tel" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">物流号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="shipping_code" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>


                            <div class="layui-inline">
                                <label class="layui-form-label">订单状态</label>
                                <div class="layui-input-inline">
                                    <select name="apply_status">
                                        <option value="">请选择</option>
                                        <option value="20">通过订单</option>
                                        <option value="30">退款订单</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">发货状态</label>
                                <div class="layui-input-inline">
                                    <select name="shipping_status">
                                        <option value="">请选择.</option>
                                        <option value="0">未发货</option>
                                        <option value="1">已发货</option>
                                        <option value="2">拒收</option>
                                        <option value="3">已签收</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="LAY-app-contlist-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                                </button>
                            </div>
                        </div>
                    </div>


                    <div class="layui-card-body">
                        <table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
                        <script type="text/html" id="test-table-operate-barDemo">
                            <div class="layui-btn-group">
                                @{{#  if(d.shipping_code!=null){ }}
                                  <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="show_shipping">物流</button>
                                @{{#  } }}
                                <button class="layui-btn layui-btn-xs" lay-event="goods">详细</button>


                            </div>
                        </script>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js?{{time()}}"></script>
    <script src="{{ADMIN_PATH}}js/admin.common.js?{{time()}}"></script>
    <script>
        var index_url='{{url('admin/ordersys/order/mygoods/search')}}';  //列表
        var add_url='{{url('admin/member/add')}}';       //添加
        var goods_url='{{url('admin/ordersys/order/mygoods/show')}}';   //编辑
        var del_url='{{url('admin/ordersys/order/mygoods/del')}}';      //删除
        var optgg_url='{{url('admin/member/optgg')}}';    //重置google
        var role_url='{{url('admin/member/change/role')}}';  //用户选择角色
        var change_url='{{url('admin/member/change/status')}}'; //修改用户状态

        var show_shipping='{{url('admin/ordersys/order/apply/showshipping')}}';
        layui.config({
            base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index','laydate', 'table'], function(){
            var $ = layui.$
                ,admin = layui.admin
                ,element = layui.element
                , laydate = layui.laydate
                ,form = layui.form;
            var table = layui.table;

            //=========================表单搜索搜索========================
            form.on('submit(LAY-app-contlist-search)', function(data){

                var field = data.field;
                console.log(field);
                //
                // //执行重载
                table.reload('test-table-reload', {
                    where: field
                });
            });
            $('.layui-btn.layuiadmin-btn-list').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //===================表格渲染========================
            table.render({
                elem: '#test-table-reload'
                ,url: index_url
                , limit: 50 //每页显示的条数
                , limits: 50//	每页条数的选择项
                ,method:'post'
                ,cols: [[
                    {field:'id', title: 'ID', width:80, sort: true}
                    ,{field:'add_time', title: '添加时间', width:140, sort: true, templet: layui_table_time_tpl_3}
                    ,{field:'all_amount', title: '总金额', width:120, sort: true}
                    ,{field:'paid_amount', title: '实付金额', width:120, sort: true}
                    ,{field:'collected_amount', title: '代付金额', width:120, sort: true}
                    ,{field:'receiver', title: '收货人', width:120}
                    ,{field:'receiver_tel', title: '收货电话', width:120}
                    ,{field:'express', title: '收货地址', width:240, templet: function(d){
                            return d.express.country_name+","+d.express.city_name+","+ d.express.region_name+","+d.express.receiver_addr;
                        }}
                    ,{field:'wx_no', title: '微信号', width:120, sort: true}
                    , {title: '粉丝类型', field: 'add_fen_type', width: 95, sort: true}
                    , {title: '本月粉丝', field: 'add_fen_month', width: 120, templet: function(d){
                            if(d.add_fen_month==1){
                                return '本月粉丝';
                            }else{
                                return '非本月粉丝';
                            }
                        }}
                    , {title: '付款方式', field: 'pt_name', width: 120, templet: function(d){
                            if(d.pt_name==1){
                                return '全款';
                            }else{
                                return '到付';
                            }
                        }}
                    , {field: 'apply_status', title: '物流状态', width: 100, fixed: 'right', templet: function(d){
                            if(d.shipping_status=='0'){
                                return '未发货';
                            }
                            if(d.shipping_status=='1'){
                                return '<span style="color:blue">已发货</span>';
                            }
                            if(d.shipping_status=='2'){
                                return '<span style="color:green">拒收</span>';
                            }
                            if(d.shipping_status=='3'){
                                return '<span style="color:red">已签收</span>';
                            }
                        }}
                    , {field: 'apply_status', title: '审核状态', width: 120, fixed: 'right', templet: function(d){
                            if(d.apply_status=='0'){
                                return '审核失败,原因:'+d.apply_error_msg;
                            }
                            if(d.apply_status=='10'){
                                return '<span style="color:blue">等待审核</span>';
                            }
                            if(d.apply_status=='20'){
                                return '<span style="color:green">审核通过</span>';
                            }
                            if(d.apply_status=='30'){
                                return '<span style="color:red">已退款</span>';
                            }
                        }}
                    ,{width:100, title: '操作',align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
                ]]
                //进行按钮操作
                ,page: true
                ,done: function(res, curr, count){
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res);

                    //得到当前页码
                    console.log(curr);

                    //得到数据总量
                    console.log(count);
                }
            });
//监听工具条
            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'role'){ //查看
                    //提交数据
                    var index = layer.open({
                        type: 2
                        , title: '分配角色:' + data.account
                        , content: role_url + "?uid=" + data.uid
                        , area: ['500px', '330px'] //宽高
                        , maxmin: true
                        , scrollbar: true
                        , end: function (index, layero) {
                            //关闭弹窗后的事件
                        }
                    });

                    //do somehing
                }  //查看物流
                else if (obj.event === 'show_shipping') {
                    var index = layer.open({
                        type: 2
                        , title: '查看物流'
                        , content: show_shipping + "?id=" + data.id
                        , area: ['80%', '550px'] //宽高
                        , maxmin: true
                        , scrollbar: false
                        , end: function (index, layero) {
                            //关闭弹窗后的事件
                        }
                    });
                }else if(layEvent === 'del'){ //删除

                    layer.confirm('确定删除吗?', function (index) {
                        //提交数据
                        //提交数据
                        var o = {uid: data.uid};
                        $.post(del_url, o, function (res) {
                            try {
                                if (res.status == 200) {
                                    //重新刷新父窗口的数据区
                                    table.reload('test-table-reload'); //重载表格
                                } else {
                                    layer.msg(res.message);
                                }
                            } catch (e) {
                                layer.msg("异常");
                            }
                        });

                        //关闭自身提示框
                        layer.close(index);
                    });

                } else if(layEvent === 'goods'){ //编辑
                    layer.open({
                        type: 2,
                        title: '编辑:'+data.id,
                        shade: false,
                        area: ['70%', '500px'], //宽高
                        content: goods_url+'?id='+data.id,
                        zIndex: layer.zIndex //重点1

                        ,success: function(layero){
                            layer.setTop(layero); //重点2
                        }
                    });
                }else if (obj.event === 'opgg') {

                    //提交数据
                    layer.confirm('确定要重置OTP绑定?', function (index) {
                        //提交数据
                        var o = {uid: data.uid};
                        $.post(optgg_url, o, function (res) {
                            try {
                                if (res.status == 200) {
                                    //重新刷新父窗口的数据区
                                    table.reload('test-table-reload'); //重载表格
                                } else {
                                    layer.msg(res.message);
                                }
                            } catch (e) {
                                layer.msg("异常");
                            }
                        });

                        //关闭自身提示框
                        layer.close(index);
                    });

                    //关闭自身提示框

                }
            });
            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#test-table-reload');
                    //执行重载
                    table.reload('test-table-reload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            uid: demoReload.val()
                        }
                    });
                },
                add: function(){
                    layer.open({
                        type: 2
                        ,title: '添加用户'
                        ,content: add_url
                        ,maxmin: true
                        ,area: ['750px', '550px']
                        ,btn: ['确定', '取消']
                        ,yes: function(index, layero){
                            //点击确认触发 iframe 内容中的按钮提交
                            var submit = layero.find('iframe').contents().find("#form_save");
                            submit.click();
                        }
                    });
                }
            };
            var insStart = laydate.render({
                elem: '#search_start_date'
                , type: 'date'
                , format: 'yyyy-MM-dd'
                //, min: 0
                , done: function (value, date) {
                    //更新结束日期的最小日期
                    insEnd.config.min = lay.extend({}, date, {
                        month: date.month - 1
                    });
                    //自动弹出结束日期的选择器
                    insEnd.config.elem[0].focus();
                }
            });

            //结束日期
            var insEnd = laydate.render({
                elem: '#search_end_date'
                , type: 'date'
                , format: 'yyyy-MM-dd'
                //, min: 0
                , done: function (value, date) {
                    //更新开始日期的最大日期
                    insStart.config.max = lay.extend({}, date, {
                        month: date.month - 1
                    });
                }
            });
            form.on('switch(component-switch)', function (obj) {
                var json = JSON.parse(decodeURIComponent($(this).data('json')));
                console.log(json);
                var name = obj.elem.name;
                var value = obj.elem.checked === true ? 1 : 0;
                var o = {};
                //数据库更新的主键
                o['uid'] = json.uid;
                //获取当前点击的checkbox的input名称和值
                o[name] = value;
                console.log(o);
                layer.confirm('确定改变当前状态吗?', function (index) {
                    //提交数据，1、提交网址 2、提交数据 3、是否关闭本iframe窗口(在弹出iframe时使用)
                    $.post(change_url, o, function (res) {
                        try {
                            if (res.status == 200) {
                                //重新刷新父窗口的数据区
                                table.reload('test-table-reload'); //重载表格
                            } else {
                                layer.msg(res.message);
                            }
                        } catch (e) {
                            layer.msg("异常");
                        }
                    });

                    //关闭自身提示框
                    layer.close(index);
                }, function (index) {
                    //按钮【按钮二】的回调
                    obj.elem.checked = !obj.elem.checked;
                    //重新渲染
                    form.render();
                });

                // layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                //     offset: '6px'
                // });

            });

        });

        function temp_switch_tpl(d){
            if(d.status==1){
                return '<input type="checkbox" name="' + this.field + '" lay-skin="switch" lay-text="开启|关闭" data-json="' + encodeURIComponent(JSON.stringify(d)) + '" lay-filter="component-switch"  checked>';
            }else{
                return '<input type="checkbox" name="' + this.field + '" lay-skin="switch" lay-text="开启|关闭" data-json="' + encodeURIComponent(JSON.stringify(d)) + '" lay-filter="component-switch"  >';
            }

        }
    </script>
@stop
